<!--表示当前文档是html5版本，让浏览器使用h5的规范解释-->
<!DOCTYPE html>
<!--表示网页的开始与结束  lang=“en”表示网页是一个英文网站 zh表示中文-->
<html lang="en">
<!--网页头部，存放一些配置字信息-->
<head>
    <meta charset="UTF-8"><!--配置编码，为了认知中文-->
    <title>我是标题</title><!--配置网页的标题-->
</head>

<body><!--网页展示的内容-->
    今日的第一个页面
    <b>加粗文字</b>
    <i>斜体文字</i>
    <s>删除线</s>
    <u>下划线</u>
    <mark>高亮文字笔记</mark>
<!--换行标签 单标记标签-->
    <br>
<!--转义字符: &lt;小于号  &gt; 大于号   &nbsp;空格v-->
    我喜欢&lt;tom&gt;苏东坡做的&nbsp;&nbsp;红烧肉
    <!--标题字h1~h6 加粗 修改字号 独占一行 有行间距  -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!-- 段落标签 p ：不加粗 独占一行 有行间距-->
    <p>出葡萄不吐葡萄皮</p>
    <p>出葡萄不吐葡萄皮</p>
    <p>出葡萄不吐葡萄皮</p>
    <!--lorem 按tab补全生成假文-->
    lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quod.

    <!--生成一条水平的灰色分割线-->
    <hr>

    <!--有序列表  ordered list-->
    <!--type控制列表项前标识符的类型
    1 阿拉伯数字 A 大写字母 a 小写字母 i 小写罗马数字 大写罗马数字 -->
    <ol type="1">
    <!--列表项 list item -->
        <li>把水煮开</li>
        <li>放面条进去</li>
        <li>把面条捞出来</li>
    </ol>

    <!--无序列表 unordered list-->
    <!--type ="none" 去掉列表向前的标识符
        type="circle"前面标识变为空心圆圈
    -->
    <ul type="circle">
        <li>《Think in Java》</li>
        <li>《Java从入门到精通》</li>
        <li>《颈椎康复指南》</li>
    </ul>


    <ul type="none">
        <li>凉菜
            <ol>
                <li>拍黄瓜</li>
                <li>皮蛋豆腐</li>
                <li>凉拌三丝</li>
            </ol>
        </li>
        <li>热菜
            <ol>
                <li>西红柿牛腩</li>
                <li>水煮肉片</li>
                <li>宫保鸡丁</li>
                <li>溜肉段</li>
             </ol>
        </li>
        <li>主食
            <ol>
                <li>米饭</li>
                <li>面条</li>
             </ol>
        </li>
    </ul>

    <hr>
        <h1>个人简历</h1>
    <hr>
    <h3>基本信息</h3>
    <p>姓名：<b>传奇哥</b></p>
    <p>性别：男</p>
    <p>爱好：<s>摄影</s></p>

    <h3>个人经历</h3>
    <ul>
        <li>小学9年</li>
        <li>中学9年</li>
        <li>高中12年</li>
    </ul>

    <h3>获得荣誉</h3>
    <ol>
        <li>机甲收集达人</li>
        <li>玩偶收集达人</li>
    </ol>
</body>
</html>